<template>
	<view class="main" :class="{'pt10vh':paid_status == 1}">
		<image v-if="paid_status == 1" src="https://resource.lanbaozixun.com/uploads/images/202403291014411d0614421.png" mode="widthFix"
			class="bg"></image>
		<view  v-if="paid_status == 1" class="xxl bold title u-padding-left-35">时效二维码</view>
		<view v-if="paid_status == 1" class="content-area u-margin-20 u-padding-left-20 u-padding-right-20 bg-white u-padding-bottom-40">
			<u-form :model="form" ref="uForm">
				<u-form-item labelWidth="150" label="产品名称">
					<u-input v-model="form.title" placeholder="请输入产品名称" />
				</u-form-item>
				<u-form-item labelWidth="150" label="LOGO">
					<uploader @after-read="afterRead($event,'logo')" :file-list="logo" :max-upload="1"
						:deletable="true" useSlot @delete="handleDelete($event,'logo')">
						<view class="column-center">
							<view class="upload-area row-center">
								<image src="/static/images/uploader_icon.png"></image>
							</view>
						</view>
					</uploader>
				</u-form-item>
				<u-form-item labelWidth="150" label="类型">
					<u-radio-group :size="26" v-model="form.type">
						<u-radio name="3" :labelSize="26">
							小程序码
						</u-radio>
						<u-radio name="1" :labelSize="26">
							二维码
						</u-radio>
						<u-radio name="2" :labelSize="26">
							链接
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="150" label="二维码" v-if="[1,3].indexOf(parseInt(form.type)) != -1">
					<uploader @after-read="afterRead($event,'qr_code')" :file-list="qr_code" :max-upload="1"
						:deletable="true" useSlot @delete="handleDelete($event,'qr_code')">
						<view class="column-center">
							<view class="upload-area row-center">
								<image src="/static/images/uploader_icon.png"></image>
							</view>
						</view>
					</uploader>
				</u-form-item>
				<u-form-item labelWidth="150" label="链接" v-else-if="form.type == 2">
					<u-input v-model="form.url" placeholder="请输入跳转链接" />
				</u-form-item>
				<u-form-item labelWidth="150" label="有效时间">
					<u-input v-model="form.end_time" placeholder="0为无过期时间.单位是分钟" />
					<view class="u-color-666666">分钟</view>
				</u-form-item>

				<u-form-item labelWidth="150" label="失效时间">
					<view>{{endTime()}}</view>
				</u-form-item>
				<u-form-item labelWidth="150" label="扫码次数">
					<u-input v-model="form.number_of_times" placeholder="请输入跳转链接" />
				</u-form-item>
				<u-form-item labelWidth="150" label="密码验证">
					<u-radio-group :size="26" v-model="form.password_verify">
						<u-radio name="1" :labelSize="26">
							开启
						</u-radio>
						<u-radio name="0" :labelSize="26">
							关闭
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="150" label="密码" v-if="form.password_verify == 1">
					<u-input v-model="form.password" placeholder="仅支持字母与数字组合密码" />
				</u-form-item>
				<u-form-item labelWidth="150" label="经理信息">
					<u-radio-group v-if="form.parent_name && form.parent_phone" :size="26" v-model="form.parent_information_type">
						<u-radio name="1" :labelSize="26">
							展示
						</u-radio>
						<u-radio name="0" :labelSize="26">
							隐藏
						</u-radio>
					</u-radio-group>
					<view v-else class="u-text-left">
						<navigator hover-class="none" url="/pages/user/authentication" class="u-font-22 u-color-FF5733" style="line-height: 1;">完善个人信息</navigator>
						<view class="u-font-22 u-tips-color u-padding-top-10" style="line-height: 1;">未完善信息无法显示经理信息</view>
					</view>
				</u-form-item>
				<u-form-item labelWidth="150" label="经理姓名" v-if="form.parent_information_type == 1">
					<u-input v-model="form.parent_name" disabled="" />
				</u-form-item>
				<u-form-item labelWidth="150" label="联系电话" v-if="form.parent_information_type == 1">
					<u-input v-model="form.parent_phone" disabled="" />
				</u-form-item>
				<u-form-item labelWidth="150" label="白名单">
					<u-radio-group :size="26" v-model="form.white_list_status">
						<u-radio name="1" :labelSize="26">
							是
						</u-radio>
						<u-radio name="0" :labelSize="26">
							否
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="" v-if="form.white_list_status == 1">
					<u-checkbox-group :size="26" >
						<u-checkbox :label-size="26" v-for="(v,k) in whiteList" :key="k" :name="v.name" v-model="v.checked">{{v.name}}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item labelWidth="150" label="客户姓名" v-if="whiteList[0].checked">
					<u-input v-model="form.name" placeholder="请输入真实姓名" />
				</u-form-item>
				<u-form-item labelWidth="150" label="客户手机" v-if="whiteList[1].checked">
					<u-input v-model="form.phone" placeholder="请输入实名制手机号" />
				</u-form-item>
				<u-form-item labelWidth="150" label="身份证号码" v-if="whiteList[2].checked">
					<u-input v-model="form.id_code" placeholder="请输入正确身份证号码" />
				</u-form-item>
				<u-form-item labelWidth="150" label="单位名称" v-if="whiteList[3].checked">
					<u-input v-model="form.unit" placeholder="与公积金/工商网上单位名称一致" />
				</u-form-item>
			</u-form>
			<view class="u-flex u-row-center">
				<u-button type="primary" class="u-margin-top-40 w-50"
					:custom-style="{backgroundColor: '#4990fa',margin:'0 20rpx'}" @click="saveData"
					shape="circle">生成邀请码</u-button>
			</view>
		</view>

		<Buy v-else-if="paid_status == 0" :buyInformation="buyInformation"></Buy>
		<!-- 加载中 -->
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	
	import {
		uploadFile
	} from "@/utils/tools";
	import {
		createQrCode,
		createQrCodeNum
	} from "@/api/app";
	import Buy from './components/buy.vue'
	export default {
		components:{
			Buy
		},
		data() {
			return {
				loadingShowStatus:true,
				form: {
					title: '',
					end_time: 20,
					type: '1',
					url: '',
					number_of_times: 1,
					password_verify: 0,
					password: '',
					parent_information_type: 0,
					parent_name:'',
					parent_phone:'',
					white_list_status: 0,
					name:'',
					phone:'',
					id_code:'',
					unit:''
				},
				whiteList:[
					{
						name:'姓名',
						checked:false
					},
					{
						name:'手机号',
						checked:false
					},
					{
						name:'身份证号',
						checked:false
					},
					{
						name:'单位',
						checked:false
					}
				],
				qr_code: [],
				logo:[],
				paid_status: -1,
				buyInformation:{
					buy_price: 0,
					buy_item_id: 0,
					month_price:0,
					month_item_id:0,
					year_price:0,
					year_item_id:0,
				}
			};
		},
		async onLoad() {
			await this.getUser()
			this.form.parent_name = this.userInfo.nickname;
			this.form.parent_phone = this.userInfo.phone;
		},
		async onShow() {
			let {
				data,
				code
			} = await createQrCodeNum()
			this.paid_status = data.paid_status
			this.loadingShowStatus = false;
			if(this.paid_status == 0){
				this.buyInformation.buy_price = data.buy_price
				this.buyInformation.year_price = data.year_price
				this.buyInformation.month_price = data.month_price
				this.buyInformation.buy_item_id = data.buy_item_id
				this.buyInformation.year_item_id = data.year_item_id
				this.buyInformation.month_item_id = data.month_item_id
			}
		},
		methods: {
			...mapActions(['getUser']),
			endTime() {
				if (this.$u.test.isEmpty(this.form.end_time)) {
					return '--';
				} else {
					return this.$u.timeFormat(new Date().getTime() + (this.form.end_time * 60 * 1000), 'yyyy-mm-dd hh:MM')
				}
			},
			afterRead(e, a) {
				const file = e;
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
						if (a == 'qr_code') this.qr_code.push(res);
						if (a == 'logo') this.logo.push(res);
						this.form[a] = res.url;
					});
				})
			},
			handleDelete(index, a) {
				if (a == 'qr_code') this.qr_code.splice(index, 1);
				if (a == 'logo') this.logo.splice(index, 1);
			},
			 saveData() {
				const _this = this;
				let saveDatas = this.form;
				if(_this.$u.test.isEmpty(_this.form.title)) return _this.$u.toast('请填写产品名称');
				if(_this.$u.test.isEmpty(_this.form.end_time)) return _this.$u.toast('请填写有效时间');
				if(saveDatas.password_verify == 1)if(_this.$u.test.isEmpty(_this.form.password)) return _this.$u.toast('请输入密码');
				if(_this.$u.test.isEmpty(_this.form.number_of_times)) return _this.$u.toast('请填写扫码次数');
				if(saveDatas.white_list_status == 1){
					let hint = '';
					saveDatas.white_list = [];
					 this.whiteList.forEach( (item,index) =>  {
						if(item.checked == true){
							saveDatas.white_list.push(index);
							
							switch(index){
								case 0:
									if(_this.$u.test.isEmpty(_this.form.name)) hint = '姓名';
									break;
								case 1:
									if(_this.$u.test.isEmpty(_this.form.name)) hint = '手机号';
									break;
								case 2:
									if(_this.$u.test.isEmpty(_this.form.name)) hint = '身份证号码';
									break;
								case 3:
									if(_this.$u.test.isEmpty(_this.form.name)) hint = '单位';
									break;
							}
						}
					} )
					if(!_this.$u.test.isEmpty(hint)) return _this.$u.toast('请填写客户' + hint);
					
					saveDatas.white_list = saveDatas.white_list.join(',')
				}
				createQrCode(saveDatas).then(res => {
					if (res.code == 1) {
						uni.redirectTo({
							url: '/pages/qr_code/info?id=' + res.data
						})
					}
				})
			},
			
			
		},
		computed: {
			...mapGetters(["userInfo"])
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		text-align: center;

		.w-50 {
			width: 50%;
		}
		
		.pt10vh{
			padding-top: 10vh;
		}

		.main {
			// padding-top: 10vh;

			.bg {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				position: absolute;
			}

			.title {
				z-index: 2;
				position: relative;
				margin-bottom: 8vh;
			}

			.content-area {
				z-index: 1;
				margin-top: 5vh;
				position: relative;
				// box-shadow: 0 0 20rpx #EEE;
			}

			.uploader-container {
				.upload-area {
					width: 160rpx;
					height: 160rpx;
					border: 4rpx dashed #E5E5E5;
					border-radius: 10rpx;

					image {
						width: 54rpx;
						height: 44rpx;
					}
				}
			}

			.unlock-btn {
				min-width: 80%;
				padding: 16rpx 32rpx;
				border-radius: 100rpx;
				color: $-color-primary;
				border: 2rpx solid $-color-primary;
				
				&:first-child{
					margin: 20vh auto 0;
				}
			}
			
			.unlock-btn-tow{
				min-width: 80%;
				padding: 16rpx 32rpx;
				border-radius: 100rpx;
				background: #313140;
				color: #FFE5CE;
				
				.icon{
					width: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>